<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Title</title>
    <link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../lib/vxe-table/index.css">
    <link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
    <link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../lib/zTree/css/zTreeStyle/zTreeStyle.css">
    <script type="text/javascript" src="../../lib/vue/vue.js"></script>
    <script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
    <script type="text/javascript" src="../../lib/element-ui/index.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
    <script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
    <script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.min.js"></script>
    <script type="text/javascript" src="../../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../lib/zTree/js/jquery.ztree.all.min.js"></script>
    <script type="text/javascript" src="../../static/js/Base64.js"></script>
    <script type="text/javascript" src="../../lib/layer/layer.min.js"></script>
    <script type="text/javascript" src="../../static/js/webApi.js"></script>
    <style type="text/css">
        /*
            找到html标签、body标签，和挂载的标签
            都给他们统一设置样式
        */
        html, body, #app, .el-container {
            /*设置内部填充为0，几个布局元素之间没有间距*/
            padding: 0px;
            /*外部间距也是如此设置*/
            margin: 0px;
            /*统一设置高度为100%*/
            height: 100%;
        }

        .el-main {
            padding: 4px;
        }
        .el-header {
            padding: 4px;
        }
        .el-footer {
            padding: 4px;
            margin: 0px;
        }
    </style>
</head>
<body>
<el-container id="app">
    <el-container>
        <el-header>
            <el-form :inline="true" :model="queryData" ref="queryData" label-width="70px" label-position="right" size="mini" style="height: 36px;border: 1px solid #e8eaec;" @submit.native.prevent>
                <el-form-item>
                    <el-input v-model="queryData.codeKey" placeholder="请输入编码或名称快速查找"  @keyup.enter.native="searchNodes"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button-group>
                    <el-button type="primary" icon="el-icon-search" @click="searchNodes"></el-button>
                    <el-button type="primary" icon="fa fa-arrow-circle-left" @click="previous"></el-button>
                    <el-button type="primary" icon="fa fa-arrow-circle-right" @click="theNext"></el-button>
                    <el-button type="primary" icon="fa fa-plus-square-o" @click="expandAll"></el-button>
                    <el-button type="primary" icon="fa fa-minus-square-o" @click="collapseAll"></el-button>
                    </el-button-group>
                </el-form-item>
            </el-form>
        </el-header>
        <el-main>
            <ul id="ztree" class="ztree"></ul>
        </el-main>
        <el-footer style="height: 40px;text-align: right;">
            <el-button type="primary" icon="fa fa-check-circle" @click="sureElement()" size="mini">确认</el-button>
            <el-button type="warning" icon="el-icon-switch-button" @click="closePage()" size="mini">退出</el-button>
        </el-footer>
    </el-container>
</el-container>
</body>
<script type="text/javascript">
    window.onload = function () {
        var index = parent.layer.getFrameIndex(window.name);
        var nodeList = [];
        var nodeIndex = 0;
        var urlParamer = URLUtils.getParam("paramer");
        urlParamer= JSON.parse(utf8to16(base64decode(urlParamer)));
        if(XEUtils.isEmpty(urlParamer)){
            return false;
        }
        //console.info(urlParamer);
        var main = {
            data() {
                return {
                    disabled:false,
                    queryData:{
                        codeKey:null
                    },
                    setting:{
                        async: {
                            enable: true,
                            url: `${curlFinance}/element/getEleZTree`,
                            type: 'get',
                            autoParam: ["dispCode"],
                            otherParam: {
                                eleSource : urlParamer.eleSource
                            }
                        },
                        check: {
                            enable: true,
                            chkStyle: urlParamer.chkStyle,
                            radioType: "all"
                        },
                        data: {
                            key: {
                                name: "title"
                            },
                            simpleData: {
                                enable: true,
                                idKey: "dispCode",
                                pIdKey: "parentCode",
                                rootPId: '0'
                            }
                        },
                        view: {
                            showLine: true,
                            dblClickExpand: false,
                            fontCss: this.getFontCss
                        },
                        callback: {
                            onAsyncSuccess:this.zTreeOnAsyncSuccess,
                            onClick: this.zTreeOnClick
                        }
                    }
                }
            },
            created() {

            },
            mounted () {
                //this.tableHeight = window.innerHeight - this.$refs.xGrid.$el.offsetTop - 5;
                //window.innerHeight:浏览器的可用高度
                //this.$refs.table.$el.offsetTop：表格距离浏览器的高度
                //后面的50：根据需求空出的高度，自行调整
                $.fn.zTree.init($("#ztree"), this.setting);
            },
            methods: {
                zTreeOnAsyncSuccess () {
                    var treeObj=$.fn.zTree.getZTreeObj("ztree");
                    treeObj.expandAll(true);
                    //勾选已经保存的节点
                    if(urlParamer.curValue){
                        var nodeValues = [];
                        if (urlParamer.chkStyle == 'checkbox') {
                            nodeValues = urlParamer.curValue.split(",");
                        } else {
                            nodeValues.push(urlParamer.curValue);
                        }
                        for (var i in nodeValues) {
                            var nodes = treeObj.getNodesByParamFuzzy("dispCode", nodeValues[i], null);
                            if (nodes.length>0) {
                                treeObj.checkNode(nodes[0], true, false,false);
                            }
                        }
                    }
                },
                zTreeOnClick (event, treeId, treeNode) {
                    var treeObj=$.fn.zTree.getZTreeObj("ztree");
                    if(treeNode.checked){
                        treeObj.checkNode(treeNode, false, false,false);
                    }else{
                        treeObj.checkNode(treeNode, true, false,false);
                    }
                },
                sureElement:function(){
                    var treeObj=$.fn.zTree.getZTreeObj("ztree");
                    var node = treeObj.getCheckedNodes(true);
                    if(node.length>=1){
                        var codeValues = [];
                        var nameValues = [];
                        for(var i=0;i<node.length;i++){
                            codeValues.push(node[i].dispCode);
                            nameValues.push(node[i].dispName);
                        }
                        parent.parentSetValue(urlParamer.eleCode,urlParamer.rowIndex,codeValues.toString(),nameValues.toString());
                        parent.layer.close(index);
                    }else{
                        $.messager.alert('系统提示!','请选择至少一条数据!', 'info');
                    }
                },
                searchNodes () {
                    var treeObj=$.fn.zTree.getZTreeObj("ztree");
                    if(treeObj){
                        if(nodeList.length>=1){
                           this.updateNodes(false);
                            nodeList = [];
                        }
                        var value = XEUtils.trim(this.queryData.codeKey);
                        var keyType = "title";
                        if(value){
                            nodeList = treeObj.getNodesByParamFuzzy(keyType, value);
                            this.updateNodes(true);
                        }
                    }
                },
                updateNodes:function(highlight){
                    var treeObj=$.fn.zTree.getZTreeObj("ztree");
                    for( var i=0, l=nodeList.length; i<l; i++) {
                        nodeList[i].highlight = highlight;
                        treeObj.updateNode(nodeList[i]);
                        treeObj.expandNode(nodeList[i], true, true, true);
                    }
                    treeObj.selectNode(nodeList[0]);
                    nodeIndex = 0;
                },
                previous:function () {
                    var treeObj=$.fn.zTree.getZTreeObj("ztree");
                    if(treeObj){
                        if(nodeList.length>0){
                            if(nodeIndex==0){
                                this.$XModal.message({ message:'当前已经是第一条数据!', status:'info' });
                            }else{
                                nodeIndex = nodeIndex - 1;
                                treeObj.selectNode(nodeList[nodeIndex]);
                            }
                        }else{
                            this.$XModal.message({ message:'当前尚无满足过滤条件的数据!', status:'info' });
                        }
                    }
                },
                theNext:function () {
                    var treeObj=$.fn.zTree.getZTreeObj("ztree");
                    if(treeObj){
                        if(nodeList.length>0){
                            if(nodeIndex==nodeList.length-1){
                                this.$XModal.message({ message:'当前已经是最后一条数据!', status:'info' });
                            }else{
                                nodeIndex = nodeIndex + 1;
                                treeObj.selectNode(nodeList[nodeIndex]);
                            }
                        }else{
                            this.$XModal.message({ message:'当前尚无满足过滤条件的数据!', status:'info' });
                        }
                    }
                },
                expandAll () {
                    var treeObj=$.fn.zTree.getZTreeObj("ztree");
                    if(treeObj){
                        var nodes = treeObj.getCheckedNodes(true);
                        if(nodes.length>0){
                            treeObj.expandNode(nodes[0], true, true, true);
                        }else{
                            treeObj.expandAll(true);
                        }
                    }
                },
                collapseAll () {
                    var treeObj=$.fn.zTree.getZTreeObj("ztree");
                    if(treeObj){
                        var nodes = treeObj.getCheckedNodes(true);
                        if(nodes.length>0){
                            treeObj.expandNode(nodes[0], false, true, true);
                        }else{
                            treeObj.expandAll(false);
                        }
                    }
                },
                getFontCss(treeId, treeNode) {
                    return (!!treeNode.highlight) ? {color:"blue", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
                },
                searchEvent (formName,acType) {

                },
                closePage:function () {
                    parent.layer.close(index);
                }
            }
        };
        var vue = Vue.extend(main);
        new vue().$mount('#app');
    }
</script>
</html>
